<template>
	<view class="list " v-if="list.length > 0">
	<u-toast ref="uToast"></u-toast>
		<view @click="toItem(item.id,word)" class="item"
			v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="info" >
				<view class="text">
					<view class="companyName" style="color: #7e7e7e;">
						<view class="setVerticalCenter sethorizontalbetween setwarp">
							
							<!-- <text>〖{{item.noticeType}}〗 {{ item.areaName||item.provinceName }} </text> -->
							
							<view class="setVerticalCenter">
								
								<view class="setNowrap1 " >
									<u-tag  :text="item.precise || item.precise2 ||'其他'" size="mini" type="success"  />
								</view>
								<!-- <u-tag plain :text="item.precise || item.precise2 ||'其他'" size='mini' type="success" shape="circleLeft" /> -->
								<view class="setMarginHorizontal">
									<text class="setfontSize2">{{item.publishTime.substr(5,5)}}</text>
								</view>
							</view>
							<view class="setVerticalCenter " >
								<!-- <text class="iconfont iconzhaobiaoxiangmu"</text> -->
								<text  style="color: #333333;">【</text><view class="" v-html="item.noticeType">
							
								</view><text style="color: #333333;">】</text>
							
								<view class="setcolor" v-html="item.areaName||item.provinceName">
							
								</view>
								<uni-icons type="location" color="#00aa8a"></uni-icons>
								
							</view>
						</view>

						<view v-if="item.companyName">
							<uni-icons type="notification" color="#00aa8a"></uni-icons>
							<text>『{{item.companyName}}』发布</text>
						</view>

					</view>
					<view class="title  setVerticalCenter">
						
						<!-- <view class="setNowrap1 " >
							<u-tag plain :text="item.precise || item.precise2 ||'其他'"  type="success" shape="circleLeft" />
						</view> -->
						<view class="setVerticalCenter setNowrap2">
							<!-- <uni-icons type="fire-filled" color="#ff2828"></uni-icons> -->
							<!-- <text> {{ item.noticeTitle }} </text> -->
							<view class="" v-html="item.noticeTitle">
								
							</view>
						</view>
						
					  
										
					</view>
					<view class="other">
						<view class="left">
						
						</view>
					
					</view>
				</view>
				<!-- 如果是普通的界面 -->
				<view class="bottom setfontSize2" v-if="type=='index'">
					<view class="right">
						<!-- 查看 -->
						<text class="iconfont iconoperation"></text>
						<!-- <uni-icons type="eye" size="22" :color="item.isView==true?'#ff118f':'#666666'"></uni-icons> -->
						<text>看过{{ item.viewCount||'' }}</text>
					</view>
					<view class="right" @tap.stop="userAction(item,item.id,'digg')">
						<!-- 点赞 -->
						<!-- <uni-icons type="hand-up" size="22" :color="item.isDigg==true?'#ff118f':'#666666'"></uni-icons> -->
						<text :style="item.isDigg==1?'color: #19be6b;':''" class="iconfont icongood"></text>
						<text  >赞同{{ item.diggCount||'' }}</text>
					</view>
					
					<view class="right setVerticalCenter " @tap.stop="userAction(item,item.id,'fav')">
						<!-- 收藏 -->
							<text :class="item.isFav==1?'setcolor':''" class="iconfont iconfavorite"></text>
							<view >收藏{{ item.favCount||'' }}</view>
							<!-- <uni-fav :checked="item.isFav" class="favBtn" :circle="true" :bg-color="item.isFav==true?'#ff118f':'#666666'"
												bg-color-checked="#00aa8f" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick(2)" />
					 -->
						<!-- <uni-icons type="star" size="22" :color="item.isFav==true?'#ff118f':'#666666'"></uni-icons> -->
						
					</view>

				</view>
				<!-- 如果是收藏的界面 ,不需要显示收藏按钮 -->
				<view class="bottom" v-if="type=='favorites'">
					<view class="right">

					</view>
					<view class="right">

					</view>
					<view class="right" @tap.stop="deteleFav(item.id)">
						<!-- 收藏 -->
						<uni-icons type="trash" size="22" color="#ff0000"></uni-icons>
						<text style="color:#ff0000;">删除</text>
					</view>

				</view>
			</view>
			<view class="line"></view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: 'articleList',
		props: {
			list: {
				type: Array,
				default: function(e) {
					return [];
				}
			},
			type: {
				type: String,
				default: function(e) {
					return 'index'
				}
			},
			// 搜索关键字
			word: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				checkList: [false, false, false, false, false, false],
				contentText: {
					contentDefault: '追番',
					contentFav: '已追番'
				}
			}
		},
		methods: {
			//删除收藏
			deteleFav(id) {
				console.info(id)
				this.$emit('detele_fav', id)
			
			
			},
			toItem(id,word){
				if(!uni.getStorageSync('isLogin')){
					uni.setStorageSync('LoginPage', '/pagesIndex/detail?id=' + id);
					
					uni.navigateTo({
						url: '/pagesCommon/login'
					});
				}else{
					uni.navigateTo({
						url: '/pagesIndex/detail?id=' + id+'&keyword='+word
					});
					// uni.navigateTo({
					// 	url: '/pagesIndex/detailshare?id=' + id+'&keyword='+word
					// });
				}
				
			},
			
			
			favClick(index) {
				this.checkList[index] = !this.checkList[index]
				// console.log(this.checkList[index]);
				this.$forceUpdate()
			},
			userAction(item, id, type) {

				let url = this.$baseApp.api.zhaobiao.favCount;
				let url_diggCount = this.$baseApp.api.zhaobiao.diggCount;
				let url_viewCount = this.$baseApp.api.zhaobiao.viewCount;
				
				// console.log("item++++++++++",item.id)
				if (type == 'digg') {
					// 点赞
					url = url_diggCount;
					// 保存用户点赞的id至本地 
					let localDigg=uni.getStorageSync('localDigg')
					if(item.isDigg==1){
						// 用户取消喜欢
						item.isDigg=0
						item.diggCount-=1
						
						// 移除该id
						localDigg=localDigg.filter(res=>{
							// console.log("res",res)
							return  res!=item.id
						})
					
						this.deleteDiggCount(item.id)
						
					}else{
						
						if(!localDigg){
							localDigg=[]
						}
						localDigg.push(item.id)
						this.getUserAction(item,id,url,type)
					}
					
					// 保存至本地
					// console.log('localDigg',localDigg)
					uni.setStorageSync('localDigg', localDigg);
					
				} else if(type=='fav'){
					
					// 保存用户点赞的id至本地
					let localisFav=uni.getStorageSync('localisFav')
					if(item.isFav==1){
						// 用户取消收藏
						item.isFav=0
						item.favCount-=1
						// 移除该id
						localisFav=localisFav.filter(res=>{
							// console.log("res",res)
							return  res!=item.id
						})
											
						this.deleteFav(item.id)
						
						
					}else{
						if(!localisFav){
							localisFav=[]
						}
						localisFav.push(item.id)
						this.getUserAction(item,id,url,type)
					}
					// console.log('localisFav',localisFav)
					uni.setStorageSync('localisFav', localisFav);
				}
				
				
			},
			getUserAction(item,id,url,type){
				this.$http.post(url + "/" + id).then(res => {
					if (res.code == '200') {
						if (type == 'digg') {
							// uni.showToast({
							// 	title: '点赞成功'
							// })
							item.diggCount = (item.diggCount || 0) + 1
							item['isDigg'] = 1;
						} else if (type == 'fav') {
							// uni.showToast({
							// 	title: '收藏成功'
							// })
							item.favCount = (item.favCount || 0) + 1
							item['isFav'] = 1;
						} 
				
					}
				});
			},
			
			// 取消喜欢
			deleteDiggCount(id){
				// console.log('-------------------')
				let url = this.$baseApp.api.zhaobiao.deleteDiggCount;
				this.$http.post(url+"/"+id).then(res=>{
					// if(res.code=='200'){
					// 	this.$alert('删除成功') 	
					// }
				});
			},
			//删除收藏
			deleteFav(id){
				// console.info(id);
				let url = this.$baseApp.api.zhaobiao.deleteFavCount;
				this.$http.post(url+"/"+id).then(res=>{
					// if(res.code=='200'){
					// 	this.$alert('删除成功') 
						
					// }
				});
				
			}
		}
	};
</script>

<style lang="scss">
	/*文章列表*/
	.list {
		margin-top: 2rpx;

		.item {
			padding: 20rpx 24rpx 0 24rpx;

			.info {
				// display: flex;
				// flex-direction: row;
				// justify-content: space-between;
				// padding-bottom: 4rpx;

				.text {
					.companyName {
						font-size: 28rpx;
						// font-weight: 600;
						color: #00aa8f;
						margin-bottom: 8rpx;
					}

					.title {
						font-size: 32rpx;
						font-weight: 600;
						// color: #6b6b6b;
						color: #303133;
						margin-bottom: 8rpx;
						max-height: 110rpx;
						// overflow: hidden;
						
							.box {
								width: 40px;
								height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								text-align: center;
								background-color: #DCDFE6;
								color: #fff;
								font-size: 12px;
							}
						
							.box-text {
								text-align: center;
								color: #fff;
								font-size: 12px;
							}
					}

					.other {
						align-items: center;
						font-size: 28rpx;
						color: #606266;
						line-height: normal;
						// margin-top: 20rpx;

						.left {
							display: flex;
							flex-direction: row;
							// justify-content: space-between;
							// justify-content: flex-end;
							margin-left: 35rpx;
						}


					}
				}

			}

			.bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.right {
					.example-body {
							display: flex;
							padding: 10px 15px;
						}
					
						/* #ifdef MP-ALIPAY */
						.uni-fav {
							margin-left: 20rpx;
						}
					
						/* #endif */
					
					
						.favBtn {
							// margin: 0 20rpx 20rpx 0;
						// margin-right: 10rpx;
						margin-left: 10rpx;
						}
					
					
						.example-body-fullWidth {
							padding: 32rpx 0;
						}
					
						.example-body-first {
							/* #ifndef APP-PLUS-NVUE */
							display: flex;
							/* #endif */
							flex-direction: row;
							justify-content: flex-start;
						}
					
						.favBtn-nav {
							// left:-50rpx;
						}
				}
			}


			.line {
				display: bock;
				width: 100%;
				height: 1rpx;
				margin-top: 20rpx;
				background: #e8e8e8;
			}

			&:last-child {
				.line {
					//display: none;
				}

				//padding-bottom: 30rpx;
			}
		}
	}
</style>
